<template>
  <div class="add-article">
    <form @submit="formSubmit">
      <view class="section">
        <view class="section__title">标题：</view>
        <input name="subTitle" placeholder="请输入文章标题" placeholder-class="section__title" />
      </view>
      <view class="textarea-field">
        <view class="section__title">文章内容：</view>
         <textarea name="content" class="input-textarea" placeholder="请输入文章" placeholder-class="section__title" />
      </view>
      <view class="btn-area">
        <button formType="submit" type="primary" :loading="btnLoading">提交</button>
      </view>
    </form>
  </div>
</template>

<script>
  import { requestUrl, wxRequest } from '../../requestApi/request'

  export default {
    data () {
      return {
        btnLoading: false
      }
    },
    methods: {
      formSubmit (e) {
        const userInfo = wx.getStorageSync('userInfo')
        const params = {
          ...e.target.value,
          nickName: userInfo.nickName,
          avatarUrl: userInfo.avatarUrl
        }
        wxRequest({
          url: requestUrl.addArticle,
          data: params,
          method: 'POST'
        }).then((result) => {
          const { data = {} } = result
          if (data.code === 200) {
            this.btnLoading = true
            wx.showToast({
              title: '新增成功',
              icon: 'none',
              image: '',
              duration: 1000,
              mask: false,
              success: () => {
                this.btnLoading = false
              }
            })
            const timeOut = setTimeout(() => {
              clearTimeout(timeOut)
              wx.navigateTo({
                url: '/pages/index/main'
              })
            }, 1000)
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    }
  }
</script>

<style scoped>
  .add-article {
    padding: 20rpx;
  }
  .textarea-field {
    margin: 20rpx 0;
  }
  .input-textarea {
    border: 1px solid rgb(228, 222, 222);
    border-radius: 10rpx;
    width: 100%;
    padding: 10rpx;
    margin-bottom: 10rpx;
    min-height: 300rpx;
    box-sizing: border-box;
  }
</style>